<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投票系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
            --danger-gradient: linear-gradient(135deg, #e74a3b 0%, #be2617 100%);
            --info-gradient: linear-gradient(135deg, #36b9cc 0%, #2a8f9e 100%);
            --success-gradient: linear-gradient(135deg, #1cc88a 0%, #13855c 100%);
            --warning-gradient: linear-gradient(135deg, #f6c23e 0%, #dda20a 100%);
            --shadow-layer: 0 10px 30px rgba(0, 0, 0, 0.08);
            --transition-default: all 0.3s ease;
        }
        
        body {
            background-color: #f9fafb;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        .navbar-brand {
            font-weight: 700;
            letter-spacing: 0.5px;
        }
        
        .bg-gradient-primary {
            background: var(--primary-gradient);
        }
        
        .bg-gradient-danger {
            background: var(--danger-gradient);
        }
        
        .bg-gradient-info {
            background: var(--info-gradient);
        }
        
        .bg-gradient-success {
            background: var(--success-gradient);
        }
        
        .bg-gradient-warning {
            background: var(--warning-gradient);
        }
        
        .card {
            box-shadow: var(--shadow-layer);
            transition: var(--transition-default);
            border: none;
            border-radius: 0.75rem;
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
        }
        
        .card-header {
            padding: 1.25rem 1.5rem;
            border-bottom: none;
        }
        
        .vote-card {
            transition: var(--transition-default);
            padding: 1.5rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .vote-card:last-child {
            border-bottom: none;
        }
        
        .vote-card:hover {
            background-color: #f8f9fa;
            transform: translateY(-3px);
        }
        
        .vote-avatar {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            transition: var(--transition-default);
        }
        
        .vote-card:hover .vote-avatar {
            transform: scale(1.05);
        }
        
        .vote-stats {
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
        }
        
        .btn-primary {
            background: var(--primary-gradient);
            border: none;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(78, 115, 223, 0.4);
        }
        
        .badge-tag {
            border-radius: 50px;
            padding: 0.4rem 0.9rem;
            font-weight: 500;
        }
        
        .pagination {
            border-radius: 50px;
            overflow: hidden;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        }
        
        .page-item:first-child .page-link,
        .page-item:last-child .page-link {
            border-radius: 0;
        }
        
        .page-link {
            padding: 0.5rem 1rem;
            border: none;
            color: #6c757d;
            transition: var(--transition-default);
        }
        
        .page-link:hover {
            background-color: #f8f9fa;
            color: #4e73df;
        }
        
        .page-item.active .page-link {
            background: var(--primary-gradient);
            color: white;
            border: none;
        }
        
        .empty-state {
            padding: 3rem 2rem;
        }
        
        .empty-state-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            margin: 0 auto 1.5rem;
        }
        
        .stats-card {
            padding: 1.25rem;
            border-radius: 0.75rem;
            margin-bottom: 1rem;
            transition: var(--transition-default);
        }
        
        .stats-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        }
        
        .progress {
            height: 0.75rem;
            border-radius: 1rem;
            margin-top: 0.5rem;
        }
        
        .trending-item {
            transition: var(--transition-default);
            border-radius: 0.75rem;
            overflow: hidden;
        }
        
        .trending-item:hover {
            transform: translateX(5px);
        }
        
        .section-title {
            position: relative;
            padding-left: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .section-title:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 4px;
            border-radius: 4px;
            background: var(--primary-gradient);
        }
        
        @media (max-width: 992px) {
            .vote-avatar {
                width: 50px;
                height: 50px;
                font-size: 1.5rem;
            }
            
            .card-header h3 {
                font-size: 1.25rem;
            }
        }
        
        @media (max-width: 768px) {
            .vote-card {
                flex-direction: column;
                text-align: center;
            }
            
            .vote-stats {
                justify-content: center;
            }
            
            .vote-avatar {
                margin: 0 auto 1rem;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .vote-card {
            animation: fadeIn 0.5s ease forwards;
            opacity: 0;
        }
        
        .vote-card:nth-child(1) { animation-delay: 0.1s; }
        .vote-card:nth-child(2) { animation-delay: 0.2s; }
        .vote-card:nth-child(3) { animation-delay: 0.3s; }
        .vote-card:nth-child(4) { animation-delay: 0.4s; }
        .vote-card:nth-child(5) { animation-delay: 0.5s; }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .badge:hover {
            animation: pulse 1.5s infinite;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-gradient-primary shadow-sm">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="{% url 'polls:index' %}">
                <i class="bi bi-bar-chart-steps me-2"></i>
                <span>投票系统</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="{% url 'polls:index' %}"><i class="bi bi-house-door me-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin/polls/question/add/"><i class="bi bi-plus-circle me-1"></i>创建投票 </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="bi bi-graph-up me-1"></i> 投票统计</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="bi bi-question-circle me-1"></i> 帮助</a>
                    </li>
                </ul>
                <div class="d-flex">
                    <a href="/admin/" class="btn btn-light me-2"><i class="bi bi-box-arrow-in-right me-1"></i> 登录</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区 -->
    <div class="container py-5">
        <!-- 页面标题和搜索 -->
        <div class="row mb-4">
            <div class="col-md-8">
                <h1 class="fw-bold mb-3">投票列表</h1>
                <p class="text-muted">浏览并参与最新的投票活动，表达您的观点</p>
            </div>
            <div class="col-md-4">
                <div class="input-group">
                    <input type="text" class="form-control form-control-lg" placeholder="搜索投票...">
                    <button class="btn btn-primary" type="button"><i class="bi bi-search"></i></button>
                </div>
            </div>
        </div>
        
        <div class="row">
            <!-- 主内容区 - 全部投票 -->
            <div class="col-lg-8">
                <div class="card shadow-lg mb-4">
                    <div class="card-header bg-gradient-primary text-white">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h3 class="mb-1 fw-bold"><i class="bi bi-list-check me-2"></i>全部投票</h3>
                                <p class="text-white-75 mb-0">请浏览并参与投票活动</p>
                            </div>
                            <span class="badge bg-white text-primary rounded-pill px-3 py-2 fw-medium">
                                <i class="bi bi-check2-circle me-1"></i> {{ paginator.count }} 个投票
                            </span>
                        </div>
                    </div>
                    
                    <div class="card-body p-0">
                        {% if latest_question_list %}
                        <div class="divide-y">
                            {% for question in latest_question_list %}
                            <!-- 动态投票项 -->
                            <a href="{% url 'polls:detail' question.id %}" class="d-block vote-card text-decoration-none text-dark">
                                <div class="d-flex gap-4">
                                    <div class="vote-avatar 
                                        {% cycle 'bg-primary bg-opacity-10 text-primary' 
                                                'bg-success bg-opacity-10 text-success' 
                                                'bg-warning bg-opacity-10 text-warning' 
                                                'bg-info bg-opacity-10 text-info' %}">
                                        <i class="bi 
                                            {% cycle 'bi-globe' 
                                                    'bi-laptop' 
                                                    'bi-cpu' 
                                                    'bi-phone' %}"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <h4 class="fw-bold mb-2">{{ forloop.counter }}. {{ question.question_text }}</h4>
                                        <p class="text-muted mb-3">参与讨论并表达您的观点</p>
                                        <div class="d-flex flex-wrap gap-3 vote-stats">
                                            <span class="d-flex align-items-center text-muted">
                                                <i class="bi bi-calendar3 me-2"></i>
                                                {{ question.pub_date|date:"m-d" }}
                                            </span>
                                            <span class="d-flex align-items-center text-muted">
                                                <i class="bi bi-list-ul me-2"></i>
                                                {{ question.choices.count }} 选项
                                            </span>
                                            <span class="d-flex align-items-center text-muted">
                                                <i class="bi bi-people me-2"></i>
                                                {{ question.total_votes }} 票
                                            </span>
                                            <div class="ms-auto">
                                                <span class="badge-tag 
                                                    {% cycle 'bg-primary bg-opacity-10 text-primary' 
                                                            'bg-success bg-opacity-10 text-success' 
                                                            'bg-warning bg-opacity-10 text-warning' 
                                                            'bg-info bg-opacity-10 text-info' %}">
                                                    <i class="bi 
                                                        {% cycle 'bi-star-fill' 
                                                                'bi-fire' 
                                                                'bi-lightning' 
                                                                'bi-arrow-up-right' %} me-1"></i>
                                                    {% cycle '热门' '活跃' '新投票' '上升中' %}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            {% endfor %}
                        </div>
                        {% else %}
                        <div class="empty-state text-center py-5">
                            <div class="empty-state-icon bg-danger bg-opacity-10 text-danger">
                                <i class="bi bi-exclamation-circle"></i>
                            </div>
                            <h4 class="fw-bold mb-2">暂无投票</h4>
                            <p class="text-muted mb-4">请稍后再来查看或创建新的投票。</p>
                            <button class="btn btn-primary">
                                <i class="bi bi-plus-lg me-2"></i>创建投票
                            </button>
                        </div>
                        {% endif %}
                    </div>
                    
                    <!-- 修复的分页控制 -->
                    <div class="card-footer bg-light">
                        <nav aria-label="投票分页">
                            <ul class="pagination justify-content-center mb-0">
                                <!-- 第一页链接 -->
                                <li class="page-item {% if page_obj.number == 1 %}disabled{% endif %}">
                                    <a class="page-link" href="?page=1">
                                        <i class="bi bi-chevron-double-left"></i>
                                    </a>
                                </li>
                                
                                <!-- 上一页链接 -->
                                <li class="page-item {% if not page_obj.has_previous %}disabled{% endif %}">
                                    <a class="page-link" href="?page={% if page_obj.has_previous %}{{ page_obj.previous_page_number }}{% else %}1{% endif %}">
                                        <i class="bi bi-chevron-left"></i>
                                    </a>
                                </li>
                                
                                <!-- 页码链接 -->
                                {% for i in paginator.page_range|slice:":10" %}
                                    {% if i >= page_obj.number|add:-2 and i <= page_obj.number|add:2 %}
                                        <li class="page-item {% if page_obj.number == i %}active{% endif %}">
                                            <a class="page-link" href="?page={{ i }}">{{ i }}</a>
                                        </li>
                                    {% endif %}
                                {% endfor %}
                                
                                <!-- 下一页链接 -->
                                <li class="page-item {% if not page_obj.has_next %}disabled{% endif %}">
                                    <a class="page-link" href="?page={% if page_obj.has_next %}{{ page_obj.next_page_number }}{% else %}{{ paginator.num_pages }}{% endif %}">
                                        <i class="bi bi-chevron-right"></i>
                                    </a>
                                </li>
                                
                                <!-- 最后一页链接 -->
                                <li class="page-item {% if page_obj.number == paginator.num_pages %}disabled{% endif %}">
                                    <a class="page-link" href="?page={{ paginator.num_pages }}">
                                        <i class="bi bi-chevron-double-right"></i>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            
            <!-- 侧边栏 -->
            <div class="col-lg-4">
                <!-- 普通投票卡片 -->
                <div class="card mb-4">
                    <div class="card-header bg-light">
                        <h5 class="fw-bold mb-0 section-title">普通投票</h5>
                    </div>
                    <div class="card-body p-0">
                        <div class="list-group list-group-flush">
                            {% for question in normal_questions %}
                            <a href="{% url 'polls:detail' question.id %}" class="list-group-item list-group-item-action trending-item">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1 fw-bold">{{ question.question_text|truncatechars:15 }}</h6>
                                    <small class="text-success">{{ question.pub_date|date:"m-d" }}</small>
                                </div>
                                <div class="d-flex align-items-center mt-2">
                                    <div class="me-3">
                                        <span class="badge bg-primary bg-opacity-10 text-primary me-2">普通</span>
                                        <small class="text-muted"><i class="bi bi-people me-1"></i> {{ question.total_votes }} 票</small>
                                    </div>
                                </div>
                            </a>
                            {% empty %}
                            <div class="list-group-item">
                                <p class="text-muted mb-0">暂无普通投票</p>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                
                <!-- 热门投票卡片 -->
                <div class="card mb-4">
                    <div class="card-header bg-light">
                        <h5 class="fw-bold mb-0 section-title">热门投票</h5>
                    </div>
                    <div class="card-body p-0">
                        <div class="list-group list-group-flush">
                            {% for question in hot_questions %}
                            <a href="{% url 'polls:detail' question.id %}" class="list-group-item list-group-item-action trending-item">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1 fw-bold">{{ question.question_text|truncatechars:15 }}</h6>
                                    <small class="text-success">{{ question.total_votes }} 票</small>
                                </div>
                                <div class="d-flex align-items-center mt-2">
                                    <div class="me-3">
                                        <span class="badge bg-danger bg-opacity-10 text-danger me-2">热门</span>
                                        <small class="text-muted"><i class="bi bi-fire me-1"></i> {{ question.pub_date|date:"m-d" }}</small>
                                    </div>
                                </div>
                            </a>
                            {% empty %}
                            <div class="list-group-item">
                                <p class="text-muted mb-0">暂无热门投票</p>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                
                <!-- 最新投票卡片 -->
                <div class="card mb-4">
                    <div class="card-header bg-light">
                        <h5 class="fw-bold mb-0 section-title">最新投票</h5>
                    </div>
                    <div class="card-body p-0">
                        <div class="list-group list-group-flush">
                            {% for question in latest_questions %}
                            <a href="{% url 'polls:detail' question.id %}" class="list-group-item list-group-item-action trending-item">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1 fw-bold">{{ question.question_text|truncatechars:15 }}</h6>
                                    <small class="text-success">{{ question.pub_date|date:"m-d" }}</small>
                                </div>
                                <div class="d-flex align-items-center mt-2">
                                    <div class="me-3">
                                        <span class="badge bg-success bg-opacity-10 text-success me-2">最新</span>
                                        <small class="text-muted"><i class="bi bi-clock me-1"></i> {{ question.total_votes }} 票</small>
                                    </div>
                                </div>
                            </a>
                            {% empty %}
                            <div class="list-group-item">
                                <p class="text-muted mb-0">暂无最新投票</p>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="bg-dark text-white py-5 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4">
                    <h5 class="fw-bold mb-3">投票系统</h5>
                    <p class="text-white-50">一个简单高效的在线投票平台，帮助您收集意见、做出决策。</p>
                    <div class="d-flex gap-3 mt-4">
                        <a href="#" class="text-white"><i class="bi bi-facebook fs-5"></i></a>
                        <a href="#" class="text-white"><i class="bi bi-twitter fs-5"></i></a>
                        <a href="#" class="text-white"><i class="bi bi-github fs-5"></i></a>
                        <a href="#" class="text-white"><i class="bi bi-linkedin fs-5"></i></a>
                    </div>
                </div>
                <div class="col-md-2 mb-4">
                    <h6 class="fw-bold mb-3">导航</h6>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="{% url 'polls:index' %}" class="text-white-50 text-decoration-none">首页</a></li>
                        <li class="mb-2"><a href="/admin/polls/question/add/" class="text-white-50 text-decoration-none">创建投票</a></li>
                        <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">投票统计</a></li>
                        <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">帮助中心</a></li>
                    </ul>
                </div>
                <div class="col-md-3 mb-4">
                    <h6 class="fw-bold mb-3">资源</h6>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">开发文档</a></li>
                        <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">API接口</a></li>
                        <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">使用教程</a></li>
                        <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">常见问题</a></li>
                    </ul>
                </div>
                <div class="col-md-3 mb-4">
                    <h6 class="fw-bold mb-3">联系我们</h6>
                    <ul class="list-unstyled">
                        <li class="mb-2 d-flex">
                            <i class="bi bi-envelope me-2 text-primary"></i>
                            <span class="text-white-50">contact@123.com</span>
                        </li>
                        <li class="mb-2 d-flex">
                            <i class="bi bi-telephone me-2 text-primary"></i>
                            <span class="text-white-50">+86 123 4567 8901</span>
                        </li>
                        <li class="mb-2 d-flex">
                            <i class="bi bi-geo-alt me-2 text-primary"></i>
                            <span class="text-white-50">海南</span>
                        </li>
                    </ul>
                </div>
            </div>
            <hr class="my-4 bg-white-10">
            <div class="text-center text-white-50">
                <p class="mb-0">© 2025  投票系统. 保留所有权利。</p>
            </div>
        </div>
    </footer>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>